wip: zen nav bar

1 files changed, 52 insertions, 104 deletions

diff --git a/packages/console/app/src/routes/workspace/[id].css b/packages/console/app/src/routes/workspace/[id].css
index 8b318a19f..399d7e737 100644
--- a/packages/console/app/src/routes/workspace/[id].css
+++ b/packages/console/app/src/routes/workspace/[id].css
@@ -1,115 +1,63 @@
-[data-page="workspace-[id]"] {
-  max-width: 64rem;
-  padding: var(--space-10) var(--space-4);
-  margin: 0 auto;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-10);
-
-  @media (max-width: 30rem) {
-    padding-top: var(--space-4);
-    padding-bottom: var(--space-4);
-
-    gap: var(--space-8);
-  }
-
-  [data-slot="sections"] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-16);
-
-    @media (max-width: 30rem) {
-      gap: var(--space-8);
-    }
-
-    section {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-8);
-
-      @media (max-width: 30rem) {
-        gap: var(--space-6);
-      }
-
-      /* Section titles */
-      [data-slot="section-title"] {
-        display: flex;
-        flex-direction: column;
-        gap: var(--space-1);
-
-        h2 {
-          font-size: var(--font-size-md);
-          font-weight: 600;
-          line-height: 1.2;
-          letter-spacing: -0.03125rem;
-          margin: 0;
-          color: var(--color-text-secondary);
-          text-transform: uppercase;
-
-          @media (max-width: 30rem) {
-            font-size: var(--font-size-md);
-          }
-        }
-
-        p {
-          line-height: 1.5;
-          font-size: var(--font-size-md);
-          color: var(--color-text-muted);
+[data-page="workspace"] {
+  line-height: 1;
+}
 
-          a {
-            color: var(--color-text-muted);
-          }
+/* Workspace Layout */
+[data-component="workspace-container"] {
+  display: flex;
+  height: calc(100vh - 73px);
+}
 
-          @media (max-width: 30rem) {
-            font-size: var(--font-size-sm);
-          }
-        }
-      }
+[data-component="workspace-nav"] {
+  width: 240px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--color-border);
+  padding: var(--space-6) var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+
+  [data-nav-button] {
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--border-radius-sm);
+    color: var(--color-text-muted);
+    text-decoration: none;
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    transition: all 0.15s ease;
+
+    &:hover {
+      background-color: var(--color-surface-hover);
+      color: var(--color-text);
     }
-    section:not(:last-child) {
-      border-bottom: 1px solid var(--color-border);
-      padding-bottom: var(--space-16);
 
-      @media (max-width: 30rem) {
-        padding-bottom: var(--space-8);
-      }
+    &.active {
+      background-color: var(--color-surface-hover);
+      color: var(--color-text);
     }
   }
+}
 
-  /* Title section */
-  [data-component="title-section"] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-    padding-bottom: var(--space-8);
-    border-bottom: 1px solid var(--color-border);
-
-    @media (max-width: 30rem) {
-      padding-bottom: var(--space-6);
-    }
-
-    h1 {
-      font-size: var(--font-size-2xl);
-      font-weight: 500;
-      line-height: 1.2;
-      letter-spacing: -0.03125rem;
-      margin: 0;
-      text-transform: uppercase;
+[data-component="workspace-content"] {
+  flex: 1;
+  padding: var(--space-6) var(--space-8);
+  overflow-y: auto;
 
-      @media (max-width: 30rem) {
-        font-size: var(--font-size-xl);
-      }
-    }
+  @media (max-width: 48rem) {
+    padding: var(--space-6) var(--space-4);
+  }
+}
 
-    p {
-      line-height: 1.5;
-      font-size: var(--font-size-md);
-      color: var(--color-text-muted);
+@media (max-width: 48rem) {
+  [data-component="workspace-container"] {
+    flex-direction: column;
+  }
 
-      a {
-        color: var(--color-text-muted);
-      }
-    }
+  [data-component="workspace-nav"] {
+    width: 100%;
+    flex-direction: row;
+    border-right: none;
+    border-bottom: 1px solid var(--color-border);
+    padding: var(--space-4);
   }
-}
+}
\ No newline at end of file